<template>
    <div class="header-class">
        <div class="title-nva">
            <ul>
                <li>首页</li>
                <li>分类</li>
                <li>排行</li>
                <li>书库</li>
                <li>完本</li>
                <li class="search">
                    <tiny-search v-model="data.search" @search="search" transparent  clearable is-enter-search></tiny-search>
                </li>
                <li>消息</li>
                <li>历史</li>
                <li>书架</li>
                <li>登录</li>
            
            </ul>
        
        </div>
    </div>
</template>
<script  setup>
  import {ref, getCurrentInstance, onMounted, reactive} from 'vue';
  import { Search as TinySearch } from '@opentiny/vue'
  const data = reactive({search:""})

  const search = (key, value)=>{
    console.log(key,value)

  }
    
</script>
<style lang="scss" scoped>
    .header-class{
        // line-height: 60px;
        // opacity: 1;
        user-select: none;
        position: fixed;
        height: 60px;
        left:0;
        right:0;
        top:0;
        margin:auto;
        z-index: 9999;
        background: #ffffff;
        
    }
    .title-nva{
        text-align: center;
        ul{
            white-space: nowrap;
            li{
                display: inline-block;
                list-style: none;
                padding: 0 10px;

            }
            li:hover{
                cursor: pointer;
            }
        }
    }
    .search{
        width: 200px;
    }
</style>